<template>
  <nav>
    <div class="navlist">
<!--      <img style="width: 40px; height: 40px; float: left;border-radius: 50%;vertical-align:middle;" src="../../../static/images/swapbook.jpg"/>-->
<!--      <span style="color: #064420; font-size: 1.5rem; float: left; vertical-align:middle; padding: 9px 0 0 5px">swapbook</span>-->
      <ul>
        <li>首页</li>
        <li>活动</li>
        <li>图书</li>
        <li>关于我们</li>
        <li>联系我们</li>
      </ul>
    </div>
    <div class="navsignin">
<!--      <div class="parentsphoto"><img src="../../../static/images/7.png"></div>-->
      <ul>
        <li><a href="/#/front/parents/addParents">注册</a></li>
        <li><a href="/#/login">登录</a></li>
      </ul>
      <div style="width: 2px;height: 13px; background: #333333; position:absolute;top: 14px; left: 56px; "></div>
    </div>
  </nav>
</template>

<script>
export default {
  name: "nav"
}
</script>

<style scoped>
body, div, img,dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:0; padding:0;}
a{text-decoration:none;color:#473c33;}
a:hover{color: #bbffff}
nav{width:100%; height: 40px; background: #d4e0e0;box-shadow:0 2px 4px 0 rgb(0 0 0 / 8%); color: white;}
nav >.navlist{ padding: 0 0 0 20px; height: 40px;float: left;  }
nav >.navlist ul{ float: left; list-style-type:none; color: #473c33; font-size:0.9rem; font-weight:600; font-family:微软雅黑; }
nav .navlist ul > li{float:left; list-style:none; padding:10px 40px 0px 0px;}
nav >.navsignin{float: right;padding-right: 20px;height: 40px;  position:relative;  }
nav >.navsignin ul{float: right;  list-style-type:none; color: #473c33; font-size:0.9rem; font-weight:600; font-family:微软雅黑;}
nav >.navsignin ul li{float:right; list-style:none; padding:10px 10px 0px 15px}
nav >.navsignin> .parentsphoto{float: right;width: 55px; height: 40px;}
nav >.navsignin> .parentsphoto > img{width: 40px; height: 40px; border-radius:50%;}
</style>
